<template>
<div>
  <a-table :columns="columns" :data-source="logList" :pagination="false">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'userId'">
        <span>
          用户Id
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'userId'">
        <a>
          {{ record.userId }}
        </a>
      </template>
      <template v-else-if="column.key === 'ip'">
        <span>
          <a-tag
              color="blue"
          >
            {{ record.ip }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link">
            More actions
            <down-outlined />
          </a>
        </span>
      </template>
    </template>
  </a-table>
  <a-pagination :current="pagination.current"
                :page-size="pagination.size"
                :total="pagination.total" show-less-items @change="onPageChange" style="margin-top: 10px"/>
</div>
</template>

<script>
import {onMounted, ref} from "vue";
import {getLogs} from "@/apis/log";

export default {
  name: "Logs",
  setup() {
    const columns = [{
      title: '用户编号',
      name:"userId",
      dataIndex: 'userId',
      key: 'userId',
    }, {
      title: '用户操作',
      dataIndex: 'operation',
      key: 'operation',
    }, {
      title: 'ip',
      dataIndex: 'ip',
      key: 'ip',
    }, {
      title: '操作时间',
      key: 'createTime',
      dataIndex: 'createTime',
    }
    ]

    const pagination = ref({
      current:1,
      size :8,
      total: 50,
    })

    const logList = ref([])

    onMounted(()=>{
      getLogList()
    })

    const  getLogList = ()=>{
      getLogs(pagination.value.current, pagination.value.size).then(res=>{
        logList.value = res.data.records
        pagination.value.current = res.data.current
        pagination.value.size = res.data.size
      });
    };

    const onPageChange = (current)=>{
      pagination.value.current = current
      getLogList()
    }

    return {
      columns,
      logList,
      pagination,
      onPageChange,
    }
  },
}
</script>

<style scoped>

</style>